<!DOCTYPE html><html><head><title>Ext.tip.QuickTipManager | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.tip.QuickTipManager',
        docClass: 'Ext.tip.QuickTipManager',
        docReq: 'Ext.tip.QuickTipManager',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'QuickTipManager.html#Ext-tip.QuickTipManager';
    clsInfo = {"methods":["destroy","disable","enable","getQuickTip","init","isEnabled","register","tips","unregister"],"cfgs":[],"properties":[],"events":[],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager" target="_blank">Ext.tip.QuickTipManager</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Provides attractive and customizable tooltips for any element. The QuickTips
singleton is used to configure and manage tooltips globally for multiple elements
in a generic manner.  To create individual tooltips with maximum customizability,
you should consider either <a href="Ext.tip.Tip.html" rel="Ext.tip.Tip" class="docClass">Ext.tip.Tip</a> or <a href="Ext.tip.ToolTip.html" rel="Ext.tip.ToolTip" class="docClass">Ext.tip.ToolTip</a>.</p>

<p>Quicktips can be configured via tag attributes directly in markup, or by
registering quick tips programmatically via the <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a> method.</p>

<p>The singleton's instance of <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">Ext.tip.QuickTip</a> is available via
<a href="Ext.tip.QuickTipManager.html#getQuickTip" rel="Ext.tip.QuickTipManager#getQuickTip" class="docClass">getQuickTip</a>, and supports all the methods, and all the all the
configuration properties of <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">Ext.tip.QuickTip</a>. These settings will apply to all
tooltips shown by the singleton.</p>

<p>Below is the summary of the configuration properties which can be used.
For detailed descriptions see the config options for the <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> class</p>

<h2>QuickTips singleton configs (all are optional)</h2>

<ul>
<li><code>dismissDelay</code></li>
<li><code>hideDelay</code></li>
<li><code>maxWidth</code></li>
<li><code>minWidth</code></li>
<li><code>showDelay</code></li>
<li><code>trackMouse</code></li>
</ul>


<h2>Target element configs (optional unless otherwise noted)</h2>

<ul>
<li><code>autoHide</code></li>
<li><code>cls</code></li>
<li><code>dismissDelay</code> (overrides singleton value)</li>
<li><code>target</code> (required)</li>
<li><code>text</code> (required)</li>
<li><code>title</code></li>
<li><code>width</code></li>
</ul>


<p>Here is an example showing how some of these config options could be used:</p>

<p><img class="screenshot" src="../Ext.tip.QuickTipManager.png" alt="Ext.tip.QuickTipManager component" /></p>

<h2>Code</h2>

<pre class="prettyprint"><code>// Init the singleton.  Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50      // Show 50ms after entering target
});

// Create a small panel to add a quick tip to
Ext.create('Ext.container.Container', {
    id: 'quickTipContainer',
    width: 200,
    height: 150,
    style: {
        backgroundColor:'#000000'
    },
    renderTo: Ext.getBody()
});


// Manually register a quick tip for a specific element
Ext.tip.QuickTipManager.register({
    target: 'quickTipContainer',
    title: 'My Tooltip',
    text: 'This tooltip was added in code',
    width: 100,
    dismissDelay: 10000 // Hide after 10 seconds hover
});
</code></pre>

<p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
the <strong>ext</strong> namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
of supported attributes (optional unless otherwise noted):</p>

<ul>
<li><code>hide</code>: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the same as autoHide = true.</li>
<li><code>qclass</code>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
<li><code>qtip (required)</code>: The quick tip text (equivalent to the 'text' target element config).</li>
<li><code>qtitle</code>: The quick tip title (equivalent to the 'title' target element config).</li>
<li><code>qwidth</code>: The quick tip width (equivalent to the 'width' target element config).</li>
</ul>


<p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>

<pre class="prettyprint"><code>// Add a quick tip to an HTML button
&amp;lt;input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
     data-qtip="This is a quick tip from markup!"&gt;&amp;lt;/input&gt;
</code></pre>
<div class="members"><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-destroy" class="member f ni"><a href="Ext.tip.QuickTipManager.html#method-destroy" rel="method-destroy" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-destroy" class="viewSource">view source</a></div><a name="destroy"></a><a name="method-destroy"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-destroy" class="cls expand">destroy</a> : void</div><div class="description"><div class="short"><p>Destroy the QuickTips instance.</p>
</div><div class="long"><p>Destroy the QuickTips instance.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-disable" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-disable" rel="method-disable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-disable" class="viewSource">view source</a></div><a name="disable"></a><a name="method-disable"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-disable" class="cls expand">disable</a> : void</div><div class="description"><div class="short"><p>Disable quick tips globally.</p>
</div><div class="long"><p>Disable quick tips globally.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-enable" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-enable" rel="method-enable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-enable" class="viewSource">view source</a></div><a name="enable"></a><a name="method-enable"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-enable" class="cls expand">enable</a> : void</div><div class="description"><div class="short"><p>Enable quick tips globally.</p>
</div><div class="long"><p>Enable quick tips globally.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-getQuickTip" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-getQuickTip" rel="method-getQuickTip" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-getQuickTip" class="viewSource">view source</a></div><a name="getQuickTip"></a><a name="method-getQuickTip"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-getQuickTip" class="cls expand">getQuickTip</a> : Ext.tip.QuickTip</div><div class="description"><div class="short"><p>Gets the single <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> instance used to show tips from all registered elements.</p>
</div><div class="long"><p>Gets the single <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> instance used to show tips from all registered elements.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.tip.QuickTip</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-init" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-init" rel="method-init" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-init" class="viewSource">view source</a></div><a name="init"></a><a name="method-init"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-init" class="cls expand">init</a>(
<span class="pre">Boolean autoRender</span>)
 : void</div><div class="description"><div class="short"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
</div><div class="long"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">autoRender</span> : Boolean<div class="sub-desc"><p>True to render the QuickTips container immediately to preload images. (Defaults to true)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-isEnabled" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-isEnabled" rel="method-isEnabled" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-isEnabled" class="viewSource">view source</a></div><a name="isEnabled"></a><a name="method-isEnabled"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-isEnabled" class="cls expand">isEnabled</a> : Boolean</div><div class="description"><div class="short"><p>Returns true if quick tips are enabled, else false.</p>
</div><div class="long"><p>Returns true if quick tips are enabled, else false.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-register" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-register" rel="method-register" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-register" class="viewSource">view source</a></div><a name="register"></a><a name="method-register"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-register" class="cls expand">register</a>(
<span class="pre">Object config</span>)
 : void</div><div class="description"><div class="short"><p>Configures a new quick tip instance and assigns it to a target element.  See
<a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
</div><div class="long"><p>Configures a new quick tip instance and assigns it to a target element.  See
<a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-tips" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-tips" rel="method-tips" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-tips" class="viewSource">view source</a></div><a name="tips"></a><a name="method-tips"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-tips" class="cls expand">tips</a>(
<span class="pre">Object config</span>)
 : void</div><div class="description"><div class="short"><p>Alias of <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a>.</p>
</div><div class="long"><p>Alias of <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a>.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-unregister" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-unregister" rel="method-unregister" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-unregister" class="viewSource">view source</a></div><a name="unregister"></a><a name="method-unregister"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-unregister" class="cls expand">unregister</a>(
<span class="pre">String/HTMLElement/Element el</span>)
 : void</div><div class="description"><div class="short"><p>Removes any registered quick tip from the target element and destroys it.</p>
</div><div class="long"><p>Removes any registered quick tip from the target element and destroys it.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : String/HTMLElement/Element<div class="sub-desc"><p>The element from which the quick tip is to be removed.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>